<template>
  <div class="alarmConfiguration zy-content">
    <!-- 搜索 -->
    <search :columns="searchData" @getSearch="getSearch(arguments)" key="search"></search>
    <div class="alarmConfiguration">
      <!-- 1 -->
      <div class="list-layout mt16">
        <div class="btns clear">
          <span class="title">物料信息</span>
        </div>
        <!-- 表格 -->
        <div class="tableContent">
          <Table
            class="resizable-table"
            border
            highlight-row
            @on-row-click="materialRowClick"
            @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,'processRoute')}"
            :columns="processRouteList"
            ellipsis
            ref="selection"
            stripe
            :data="dataArr"
          ></Table>
        </div>
        <!-- 分页 -->
        <div class="pageWrap mt16">
          <pageLeftTitle :total="total" :selected="delIds.length" />
          <Page
            :total="total"
            :page-size="pageSize"
            :page-size-opts="pageSizeOption"
            :current="pageNum"
            @on-change="changePageNum"
            @on-page-size-change="changePageSize"
            show-sizer
            show-total
          />
        </div>
      </div>
      <!-- 工艺路线 -->
      <div class="list-layout mt16">
        <div class="btns clear">
          <span class="title">工艺路线</span>
        </div>
        <!-- 表格 -->
        <div class="tableContent">
          <Table
            class="resizable-table"
            border
            highlight-row
            @on-row-click="routeRowClick"
            @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,'processRoute1')}"
            :columns="processRoute1List"
            ellipsis
            ref="selection"
            stripe
            :data="dataArr1"
          ></Table>
        </div>
        <!-- 分页 -->
        <div class="pageWrap mt16">
          <pageLeftTitle :total="total1" :selected="delIds.length" />
          <Page
            :total="total1"
            :page-size="pageSize1"
            :page-size-opts="pageSizeOption"
            :current="pageNum1"
            @on-change="changePageNum1"
            @on-page-size-change="changePageSize1"
            show-sizer
            show-total
          />
        </div>
      </div>
      <!-- 制造工序 -->
      <div class="list-layout mt16">
        <div class="btns clear">
          <span class="title">制造工序</span>
          <Button @click="setStatus(1)">转产</Button>
          <Button @click="setStatus(2)">调机</Button>
          <Button @click="setStatus(3)">拆模</Button>
        </div>
        <!-- 表格 -->
        <div class="tableContent">
          <Table
            class="resizable-table"
            border
            highlight-row
            @on-row-click="makeRowClick"
            @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,'processRoute2')}"
            @on-selection-change="onSelectChange"
            :columns="processRoute2List"
            ellipsis
            ref="selection"
            stripe
            :data="dataArr2"
          ></Table>
        </div>
        <!-- 分页 -->
        <div class="pageWrap mt16">
          <pageLeftTitle :total="total2" :selected="delIds.length" />
          <Page
            :total="total2"
            :page-size="pageSize2"
            :page-size-opts="pageSizeOption"
            :current="pageNum2"
            @on-change="changePageNum2"
            @on-page-size-change="changePageSize2"
            show-sizer
            show-total
          />
        </div>
      </div>
      <!-- 关联工装 关联设备 -->
      <Tabs class="tabs-layout mt16">
        <TabPane label="关联工装" name="1">
          <div class="list-layout mt16">
            <div class="btns clear">
              <span class="title">{{ $t("common.listInformation") }}</span>
            </div>
            <!-- 表格 -->
            <div class="tableContent">
              <Table
                class="resizable-table"
                border
                @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,'processRoute3')}"
                :columns="processRoute3List"
                ellipsis
                ref="selection"
                stripe
                :data="dataArr3"
              ></Table>
            </div>
            <!-- 分页 -->
            <div class="pageWrap mt16">
              <pageLeftTitle :total="total3" :selected="delIds.length" />
              <Page
                :total="total3"
                :page-size="pageSize3"
                :page-size-opts="pageSizeOption"
                :current="pageNum3"
                @on-change="changePageNum3"
                @on-page-size-change="changePageSize3"
                show-sizer
                show-total
              />
            </div>
          </div>
        </TabPane>
        <TabPane class="mt16" label="关联设备" name="2">
          <div class="list-layout">
            <div class="btns clear">
              <span class="title">{{ $t("common.listInformation") }}</span>
            </div>
            <!-- 表格 -->
            <div class="tableContent">
              <Table
                class="resizable-table"
                border
                @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,'processRoute4')}"
                :columns="processRoute4List"
                ellipsis
                ref="selection"
                stripe
                :data="dataArr4"
              ></Table>
            </div>
            <!-- 分页 -->
            <div class="pageWrap mt16">
              <pageLeftTitle :total="total4" :selected="delIds.length" />
              <Page
                :total="total4"
                :page-size="pageSize4"
                :page-size-opts="pageSizeOption"
                :current="pageNum4"
                @on-change="changePageNum4"
                @on-page-size-change="changePageSize4"
                show-sizer
                show-total
              />
            </div>
          </div>
        </TabPane>
      </Tabs>
    </div>
    <Modal
      :mask-closable="false"
      v-model="create"
      :title="setObj.processAttributes"
      class="modal-content-layout"
    >
      <Form ref="form" class="formList" :model="setObj" label-position="top" :rules="ruleValidate">
        <FormItem :label="`是否需要${setObj.processAttributes}`" prop="skipProcess">
          <RadioGroup v-model="setObj.skipProcess">
            <Radio label="是">{{ $t("common.Yes") }}</Radio>
            <Radio label="否">{{ $t("common.No") }}</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="create = false">
          {{
          $t("common.Cancle")
          }}
        </Button>
        <Button type="primary" :loading="loading" @click="addOk('form')">
          {{
          $t("maintenance.Confirmed")
          }}
        </Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  getMaterialPage,
  getRoutePage,
  getProcessesPage,
  getAssDevicePage,
  getAssEquipPage
} from "@/api/system/processRoute.js";
import search from "@/components/curd/searchList.vue";
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
  name: "processRoute", //仓库配置
  components: { search },
  mixins: [toggleTableOperation],
  data() {
    return {
      dataArr1: [],
      moldCode: "",
      create: false,
      setObj: {},
      searchData: [
        // {
        //   title: "功能位置",
        //   key: "mlocationCode",
        //   type: "cascader",
        //   dicUrl: "/basic/organization/findListByToken?level=0",
        //   params: {
        //     label: "name",
        //     value: "code",
        //     children: "children",
        //   },
        // },
        {
          title: "物料编号",
          key: "materialCode"
        },
        {
          title: "物料名称",
          key: "materialName"
        }
      ],
      columns: [
        {
          title: "序号",
          width: 80,
          align: "center",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.pageNum - 1) * this.pageSize + 1
            );
          }
        },
        {
          title: "物料编码",
          key: "materialCode",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "物料名称",
          key: "materialName",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "物料类型",
          key: "materialType",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "功能位置",
          key: "",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        }
        // {
        //   title: "有效期",
        //   key: "",
        //   minWidth: 100,
        //   align: "center",
        //   resizable: true, tooltip: true,
        // },

        // {
        //   title: "备注",
        //   key: "",
        //   minWidth: 100,
        //   align: "center",
        //   resizable: true, tooltip: true,
        // },
      ],
      ruleValidate: {
        skipProcess: [
          {
            required: true,
            message: "请选择",
            trigger: "blur"
          }
        ]
      },
      columns1: [
        {
          title: "序号",
          width: 80,
          align: "center",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.pageNum1 - 1) * this.pageSize1 + 1
            );
          }
        },

        {
          title: "物料编码",
          key: "materialCode",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "物料名称",
          key: "materialName",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "功能位置",
          key: "",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工艺路线编码",
          key: "groups",
          minWidth: 130,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工艺路线描述",
          key: "productionProcessesCode",
          minWidth: 130,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "组计数器",
          key: "groupCounter",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工作中心代码",
          key: "workCenter",
          minWidth: 130,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "控制码",
          key: "controlCode",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "有效期始于",
          key: "",
          minWidth: 130,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "有效期至",
          key: "",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "修改时间",
          key: "",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "备注",
          key: "",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        }
      ],
      columns2: [
        {
          type: "selection",
          minWidth: 60,
          align: "center"
        },
        {
          title: "序号",
          width: 80,
          align: "center",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.pageNum2 - 1) * this.pageSize2 + 1
            );
          }
        },
        {
          title: "工序号",
          key: "productionProcessesNo",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工序编码",
          key: "productionProcessesCode",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工序名称",
          key: "productionProcessesName",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工序内容",
          key: "productionProcessesContent",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "物料编码",
          key: "materialCode",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "物料名称",
          key: "materialName",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "物料类型",
          key: "materialType",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "物料数量",
          key: "",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工序数量",
          key: "productionProcessesQuantity",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "人工作业时间",
          key: "laborOperationTime",
          minWidth: 130,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "人工作业时间（单位）",
          key: "laborUnit",
          minWidth: 190,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "机器作业时间",
          key: "machineOperationTime",
          minWidth: 130,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "机器作业时间（单位）",
          key: "storageNum",
          minWidth: 190,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "是否需要转产",
          key: "needChange",
          minWidth: 190,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "是否需要调机",
          key: "needFerryFlight",
          minWidth: 190,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "是否需要拆模",
          key: "needRemoveMold",
          minWidth: 190,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "备注",
          key: "storageNum",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        }
      ],
      columns3: [
        {
          title: "序号",
          width: 80,
          align: "center",
          render: (h, params) => {
            console.log(params);
            return h(
              "span",
              params.index + (this.pageNum3 - 1) * this.pageSize3 + 1
            );
          }
        },
        {
          title: "优先级",
          key: "",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "物料编码",
          key: "",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "物料名称",
          key: "",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工厂",
          key: "",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工艺路线描述",
          key: "processRouteDescribe",
          minWidth: 140,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "组计数器",
          key: "groupCounter",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工序号",
          key: "productionProcessesNo",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工装编号",
          key: "equipCode",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工装名称",
          key: "equipName",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "规格",
          key: "spec",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工装类型",
          key: "equipType",
          minWidth: 120,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工装数量",
          key: "equipQuantity",
          minWidth: 160,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "备注",
          key: "",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        }
      ],
      columns4: [
        {
          title: "序号",
          width: 80,
          align: "center",
          render: (h, params) => {
            console.log(params);
            return h(
              "span",
              params.index + (this.pageNum4 - 1) * this.pageSize4 + 1
            );
          }
        },
        {
          title: "优先级",
          key: "",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "物料编码",
          key: "",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "物料名称",
          key: "",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工厂",
          key: "factory",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工艺路线描述",
          key: "processRouteDescribe",
          minWidth: 140,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "组计数器",
          key: "groupCounter",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "工序号",
          key: "productionProcessesNo",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "设备编号",
          key: "deviceNo",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "设备名称",
          key: "deviceName",
          minWidth: 140,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "设备型号",
          key: "deviceModel",
          minWidth: 160,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "设备吨位",
          key: "tonnage",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "功能位置",
          key: "",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "备注",
          key: "",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true
        }
      ],

      pageSizeOption: [10, 20, 30, 40],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      dataArr: [],
      materialRow: {},

      pageNum1: 1,
      pageSize1: 10,
      total1: 0,
      dataArr1: [],
      craftRow: {},

      pageNum2: 1,
      pageSize2: 10,
      total2: 0,
      dataArr2: [],
      makeRow: {},

      pageNum3: 1,
      pageSize3: 10,
      total3: 0,
      dataArr3: [],
      delIds: [],

      pageNum4: 1,
      pageSize4: 10,
      total4: 0,
      dataArr4: [],

      delIds: [],
      selection: [],
      orgList: []
    };
  },
  mounted() {
    this.getTableColumnsWidth(this.columns, "processRoute");
    this.getTableColumnsWidth(this.columns1, "processRoute1");
    this.getTableColumnsWidth(this.columns2, "processRoute2");
    this.getTableColumnsWidth(this.columns3, "processRoute3");
    this.getTableColumnsWidth(this.columns4, "processRoute4");
    // this.getTableColumnsWidth(this.columns);
    this.searchList();
  },
  methods: {
    setStatus(type) {
      if (this.delIds.length == 0) {
        this.$Message.warning("请先选择数据");
        return;
      }
      this.create = true;
      this.setObj = {
        idList: this.delIds,
        // title: "",
        processAttributes: "",
        skipProcess: "否"
      };
      if (type == 1) {
        this.setObj.processAttributes = "转产";
      } else if (type == 2) {
        this.setObj.processAttributes = "调机";
      } else if (type == 3) {
        this.setObj.processAttributes = "拆模";
      }
    },
    addOk(name) {
      this.$refs[name].validate(valid => {
        if (!valid) {
          return;
        } else {
          this.loading = true;
          this.axios({
            method: "put",
            url: "/dms/plmMaterialRoute/updateProcess",
            data: this.setObj
          }).then(res => {
            if (res.code == 200) {
              this.searchList2();
              this.$Message.success({
                content: res.msg,
                duration: 6,
                closable: true
              });
            } else {
              this.$Message.warring({
                content: res.msg,
                duration: 6,
                closable: true
              });
            }
            this.loading = false;
            this.create = false;
          });
        }
      });
    },
    getSearch(params) {
      this.searchParams = JSON.parse(JSON.stringify(params[0]));
      this.pageNum=1;
      this.searchList();
    },
    //分页 0
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    //1
    changeNum1() {
      this.pageNum1 = 1;
      this.searchList1();
    },
    changePageSize1(pageSize) {
      this.pageSize1 = pageSize;
      this.searchList1();
    },
    changePageNum1(val) {
      this.pageNum1 = val;
      this.searchList1();
    },
    // 2
    changeNum2() {
      this.pageNum2 = 1;
      this.searchList2();
    },
    changePageSize2(pageSize) {
      this.pageSize2 = pageSize;
      this.searchList2();
    },
    changePageNum2(val) {
      this.pageNum2 = val;
      this.searchList2();
    },
    // 3
    changeNum3() {
      this.pageNum3 = 1;
      this.searchList3();
    },
    changePageSize3(pageSize) {
      this.pageSize3 = pageSize;
      this.searchList3();
    },
    changePageNum3(val) {
      this.pageNum3 = val;
      this.searchList3();
    },
    // 4
    changeNum4() {
      this.pageNum4 = 1;
      this.searchList4();
    },
    changePageSize4(pageSize) {
      this.pageSize4 = pageSize;
      this.searchList4();
    },
    changePageNum4(val) {
      this.pageNum4 = val;
      this.searchList4();
    },

    //查询列表
    searchList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      for (let key in this.searchParams) {
        if (this.searchParams[key]) {
          this.$set(params, key, this.searchParams[key]);
        }
      }
      getMaterialPage(params).then(res => {
        if (res.code === 200) {
          this.dataArr = res.data.records;
          this.total = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true
          });
        }
      });
    },

    //物料行点击
    materialRowClick(row) {
      this.materialRow = row;
      this.delIds = [];
      this.dataArr1 = [];
      this.dataArr2 = [];
      this.dataArr3 = [];
      this.searchList1();
    },
    //查询列表
    searchList1() {
      let params = {
        pageNum: this.pageNum1,
        pageSize: this.pageSize1,
        materialCode: this.materialRow.materialCode
      };
      getRoutePage(params).then(res => {
        if (res.code === 200) {
          this.dataArr1 = res.data.records;
          this.total1 = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true
          });
        }
      });
    },
    routeRowClick(row) {
      this.craftRow = row;
      this.searchList2();
    },
    //查询列表
    searchList2() {
      let params = {
        pageNum: this.pageNum2,
        pageSize: this.pageSize2,
        id: this.craftRow.id
      };
      getProcessesPage(params).then(res => {
        if (res.code === 200) {
          this.dataArr2 = res.data.records;
          this.total2 = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true
          });
        }
      });
    },
    makeRowClick(row) {
      this.makeRow = row;
      this.searchList3();
      this.searchList4();
    },
    onSelectChange(selection) {
      let myArray = [];
      selection.map((item, index) => {
        myArray.push(item.id);
      });
      this.delIds = myArray;
      if (selection.length > 0) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
    },
    //查询列表
    searchList3() {
      let params = {
        pageNum: this.pageNum3,
        pageSize: this.pageSize3,
        id: this.makeRow.id
      };
      getAssDevicePage(params).then(res => {
        if (res.code === 200) {
          this.dataArr3 = res.data.records;
          this.total3 = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true
          });
        }
      });
    },
    searchList4() {
      let params = {
        pageNum: this.pageNum4,
        pageSize: this.pageSize4,
        id: this.makeRow.id
      };
      getAssEquipPage(params).then(res => {
        if (res.code === 200) {
          this.dataArr4 = res.data.records;
          this.total4 = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true
          });
        }
      });
    }
  }
};
</script>
      
<style scoped lang="scss">
.ivu-input-number {
  width: -webkit-fill-available;
}
</style>  